<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="content">
                    <div class="title">
                        <span>{{$route.query.title}}</span>
                        <i class="el-icon-close" @click="$router.go(-1)"></i>
                    </div>
                    <h4>基本信息</h4>
                    <table width="100%" border="0" cellspacing="1" cellpadding="0">
                        <tr>
                            <td>订单ID： {{detail.id}}</td>
                            <td>订单编号： {{detail.out_trade_no}}</td>
                        </tr>
                        <tr>
                            <td>用户ID： {{detail.user.id}}</td>
                            <td>用户昵称： {{detail.user.truename}}</td>
                        </tr>
                        <tr>
                            <td>商品数量： {{detail.goods_number}}</td>
                            <td>订单状态： {{detail.status | orderStatus}}</td>
                        </tr>
                    </table>
                    <h4>地址物流</h4>
                    <table width="100%" border="0" cellspacing="1" cellpadding="0">
                        <tr>
                            <td>收件人名称： {{detail.address.realname}}</td>
                            <td>手机号码： {{detail.address.phone}}</td>
                            <td>收货地址： {{detail.address.address}}</td>
                        </tr>
                        <tr>
                            <td>物流公司： <span v-if="detail.express">{{detail.express.express_name | address}}</span></td>
                            <td>快递单号： <span v-if="detail.express">{{detail.express.express_no}}</span></td>
                            <td>最新物流： <span v-if="detail.express">{{detail.express.last_info}}</span></td>
                        </tr>
                    </table>
                    <h4>商品信息</h4>
                    <el-table :data="detail.goods" :header-cell-style="{background:'#f5f6f8'}" border>
                        <el-table-column label="商品小图">
                            <template slot-scope="scope">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.goods_images" fit="fill" :preview-src-list="scope.row.srcList"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="goods_name" label="商品名称">
                        </el-table-column>
                        <el-table-column label="规格属性">
                            <template slot-scope="scope">
                                <div>{{scope.row.sku_text}} 数量:x{{scope.row.number}}件</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="number" label="数量">
                        </el-table-column>
                        <el-table-column prop="sale_price" label="单价">
                        </el-table-column>
                    </el-table>
                    <h4>支付信息</h4>
                    <table width="100%" border="0" cellspacing="1" cellpadding="0">
                        <tr>
                            <td>付款方式： {{detail.payment | payment}}</td>
                            <td>付款时间： {{detail.pay_time}}</td>
                        </tr>
                        <tr>
                            <td>支付编号： {{detail.trade_no}}</td>
                            <td>订单总额： {{detail.orders_payable}}</td>
                        </tr>
                        <tr>
                            <td>商品总额： {{detail.goods_total}}</td>
                            <td>订单运费： {{detail.freight}}</td>
                        </tr>
                    </table>
                </div>
            </div>

        </section>
    </div>
</template>

<script>

export default {
    data() {
        return {
            id: '',
            detail: {
                address: {
                    city: {},
                    provicnce: {},

                },
                express: {},
                goods: [],
                user: {}
            },
        }
    },
    created() {
        this.$route.meta.title = this.$route.query.title
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.getDetail()
        }
    },
    mounted() {

    },
    filters: {
        orderStatus(val) {
            switch (val) {
                case 1:
                    return '待付款';
                case 2:
                    return '待发货 ';
                case 3:
                    return '待收货';
                case 4:
                    return '已完成';
                case 5:
                    return '已取消 ';
                case 6:
                    return '退款中';
                case 7:
                    return '已退款';
                case 8:
                    return '已评价 ';
                case 9:
                    return '部分退款';
            }
        },
        address(val) {
            switch (val) {
                case 'yuantong':
                    return '圆通快递';
                case 'zhongtong':
                    return '中通快递 ';
                case 'jd':
                    return '京东快递';
            }
        },
        payment(val) {
            switch (val) {
                case 'WxPay':
                    return '微信支付';
                case 'AliPay':
                    return '支付宝支付 ';
            }
        }
    },
    methods: {
        async getDetail() {
            let res = await this.$Http.getOrderInfo({ id: this.id })
            if (res.status == 1) {
                this.detail = res.data
                for (let i in this.detail.goods) {
                    this.detail.goods[i].srcList = [this.detail.goods[i].goods_images]
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    ::v-deep .el-form-item__label {
        float: initial;
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
        color: #606266;
        background-color: transparent;
    }
    .kong {
        height: 40px;
    }
    section {
        background: #eee;
        padding: 30px;
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0 24px 20px;
        }
        .content {
            height: 100%;
            table {
                border-collapse: collapse;
            }
            table td {
                border: 1px solid #ddd;
                background: #f5f6f8;
                line-height: 40px;
                padding-left: 20px;
            }
            .title {
                height: 65px;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                color: #383b40;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .el-icon-close {
                    cursor: pointer;
                }
            }
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
</style>